var GroupedList = new Class.create(List, {
	initialize: function($super, data)
	{
		this.tag = "grp";
		this.id = "groupedlist";
		$super(data);
		
		document.observe('list:drop', this.dragMerge.bindAsEventListener(this));
		
		this.surface.observe('mouseout', function(event) {
			$$('.drag_hover').each(function(elem){
				elem.removeClassName('drag_hover');
			});
			this.drop_zone = false;
		}.bindAsEventListener(this));
		
		this.list.observe('mouseover', function(event){
			if(!window.list_dragging)
				return;
				
			var target = event.target;
			
			// Find the currently hovered over <li>
			if(target.localName != 'li')
				target = target.up('li');
				
			// Have we found an <li>	
			if(target && target.localName == 'li')
			{
				if(!target.hasClassName('drag_hover'))
				{
					$$('.drag_hover').each(function(elem){
						elem.removeClassName('drag_hover');
					})
					target.addClassName('drag_hover');
					this.drop_zone = target;
				}
			}
			else
			{
				$$('.drag_hover').each(function(elem){
					elem.removeClassName('drag_hover');
				})
				this.drop_zone = false;
			}
		}.bindAsEventListener(this));
		
		this.list.observe('mouseout', function(event){
			var target = event.target;
			
			if(target.localName == 'li')
			{
				target.removeClassName('drag_hover');
				this.drop_zone = target;
			}
		}.bindAsEventListener(this));
	},
	
	renderA2Z: function()
	{
		this.az.update();
		
		for(var i=65; i<=90; i++)
		{
			var c = String.fromCharCode(i).toLowerCase();
			var node = Builder.node('li', {id: this.tag+'-az-'+c}, c);
			
			if(this.data.matched_data.az_indexes[c].length)
				node.addClassName('enabled');
				
			if(c == this.currentPage)
				node.addClassName('selected');
			
			this.az.insert(node);
		}
		
		this.az.insert(Builder.node('li', {}, '#'));
	},
	
	renderList: function()
	{
		this.list.update();
		
		var i = 0;
		this.data.matched_data.az_indexes[this.currentPage].each(function(group) {
			
			var li = Builder.node('li', {id: this.tag+'-listitem-'+group.id, className: 'matchedgroup '+(i++ % 2 == 0 ? 'odd' : 'even')});
			
			group.items.each(function(item) {
				li.insert(Builder.node('div', {id: this.tag+'-listitem-'+item.id}, [
					Builder.node('span', {className: 'delete'}, "[x]"),
					item.label
				]));
			}.bind(this));
			
			this.list.insert(li);
		}.bind(this));
	},
	
	updateTitle: function()
	{
		this.titleBar.update(Builder.node('div', {}, [
			"Grouped "+this.currentPage.toUpperCase()+"'s ("+this.data.matched_data.az_indexes[this.currentPage].length+" items)"
		]));
	},
	
	dragMerge: function(event)
	{
		if(event && event.memo && this.drop_zone)
		{
			var item_id = event.memo.id.split('-').last();
			var item = this.data.itemWithID(item_id);
			
			var group = this.data.matched_data.groupWithID(this.drop_zone.id.split('-').last());
			
			this.data.addItemToGroup(item, group);
			document.fire('list:refresh');
		}
	},
	
	getSurface: function()
	{
		return this.surface;
	},
	
	resize: function()
	{
		
	},
	
	singleClick: function($super, event)
	{
		if(event.target.hasClassName('delete'))
		{
			var div = event.target.up();
			var item_id = div.id.split('-').last();
			this.data.removeItemFromGroup(this.data.itemWithID(item_id));
			document.fire('list:refresh');
		}
		else
			$super(event);
	}
});